import { useCounter } from "@/model/context";
import { activateList, activateListKing, pokerUserActivatInfoJ } from "@/service";
import { Button, message, Space } from "antd";
import { MessageTwoTone } from '@ant-design/icons';
import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const activeStatus = [
  '准备中',
  '进行中',
  '已结束',
]

export default function Home() {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate: any = useNavigate();
  const { state: { serverId, serverName, serverList } } = useCounter();
  const [data, setData] = React.useState<any>([]);
  const [data2, setData2] = React.useState<any>([]);

  useEffect(() => {
    getActiveList()
  }, [serverId])

  const getActiveList = async () => {
    const res = await activateList({ serverId: serverId ? serverId : '', runStatus: 2 })
    setData(res)
    const res2 = await activateListKing({ serverId: serverId ? serverId : '', runStatus: 2 })
    setData2(res2)
  }

  const selectDetail = (item: any, type: string) => {
    navigate({
      pathname: type === '1' ? "/activeDetail" : '/activeDetail2',
      search: type === '1' ? `?id=${item.id}&taskId=${item?.taskId}&pubPoker1=${item?.pubPoker1}&pubPoker2=${item?.pubPoker2}&endTime=${item?.endTime}
      &activeName=${item?.name}&activeMaxChage=${item?.activeMaxChage}&changePokerBaseNum=${item?.changePokerBaseNum}&changePokerAddNum=${item?.changePokerAddNum}` : `?id=${item.id}&taskId=${item?.taskId}&endTime=${item?.endTime}
      &activeName=${item?.name}`,
    });
  };
  const showAwardHistory = async (item: any) => {
    navigate({
      pathname: "/history",
      search: `?taskId=${item?.taskId}`,
    });
  };
  const getServerName = (id: string | number) => {
    const item = serverList?.find(item => item?.id + '' === id)
    return item ? item?.name : ''
  }

  return (
    <>
      <div className="homePage">
        {contextHolder}
        <div className="header">卡片小游戏</div>
        <div className="activeList">
          {data?.map((item: any) => {
            return (
                item?.isJoin == 1 &&<div className="acitveItem" key={item?.id}>
                {/* <img
                    src="https://pic1.imgdb.cn/item/6479ba20f024cca173a264b1.jpg"
                    alt=""
                  /> */}
                <div className="activeInfo">                  
                  <div><span>活动名称:</span><span>{item?.name}</span>                  {
                    item?.isAward == 1 && (item?.awardCount != 0 ?
                      <Space>
                        <MessageTwoTone twoToneColor="#FF0000" />
                      </Space>                     : null
                    )
                  }</div>
                  {/* <div><span>活动倒计时:</span><span></span></div> */}
                  <div><span>所属区服:</span><span>{getServerName(item?.serverId)}</span></div>
                  {/* <div><span>玩家参与状态:</span><span></span></div> */}
                  <div><span>当前排名:</span><span>{item?.rank}</span></div>
                  {/* <div><span>玩家结算后排名:</span><span></span></div> */}
                  <div><span>截止时间:</span><span>{item?.endTime}</span></div>
                </div>
                <div className="activeActive">
                  {
                    <Button type="primary" onClick={() => selectDetail(item, '1')}>
                      查看详情
                    </Button>
                  }
                  {
                    item?.isAward == 1 && (item?.awardCount != 0 ? <Button type="primary" onClick={() => showAwardHistory(item)}>{item?.awardCount}项奖励待领取</Button> : <Button type="primary" onClick={() => showAwardHistory(item)}>领取记录</Button>)
                  }
                </div>
              </div>
            );
          })}
        </div>
        <div className="header">投票活动</div>
        <div className="activeList">
          {data2?.map((item: any) => {
            return (
                item?.isJoin == 1 &&<div className="acitveItem" key={item?.id}>
                {/* <img
                    src="https://pic1.imgdb.cn/item/6479ba20f024cca173a264b1.jpg"
                    alt=""
                  /> */}
                <div className="activeInfo">
                  <div><span>活动名称:</span><span>{item?.name}</span>                  {
                    item?.isAward == 1 && (item?.awardCount != 0 ?
                      <Space>
                        <MessageTwoTone twoToneColor="#FF0000" />
                      </Space> : null
                    )
                  }</div>
                  {/* <div><span>活动倒计时:</span><span></span></div> */}
                  <div><span>所属区服:</span><span>{getServerName(item?.serverId)}</span></div>
                  {/* <div><span>玩家参与状态:</span><span></span></div> */}
                  <div><span>当前排名:</span><span>{item?.rank}</span></div>
                  {/* <div><span>玩家结算后排名:</span><span></span></div> */}
                  <div><span>截止时间:</span><span>{item?.endTime}</span></div>
                </div>
                <div className="activeActive">
                  {
                    <Button type="primary" onClick={() => selectDetail(item, '2')}>
                      查看详情
                    </Button>
                  }
                  {
                    item?.isAward == 1 && (item?.awardCount != 0 ? <Button type="primary" onClick={() => showAwardHistory(item)}>{item?.awardCount}项奖励待领取</Button> : <Button type="primary" onClick={() => showAwardHistory(item)}>领取记录</Button>)
                  }
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}
